<template>
  <div :class="position == 'bottom' ? 'c-w100 c-ph64 c-pt36 c-br-tl20 c-br-tr20' : 'c-ww520 c-br20 c-ph20 c-pt80'" class=" c-bg-white c-flex-column c-aligni-center c-pb36 c-p">
    <i @click="hideGuidePop" class="iconfont c-fs32 c-fc-gray c-pa c-p-r0 c-p-t0 c-ph20 c-pv20">&#xe6e1;</i>
    <template v-if="isType == true">
      <div class="c-fs28 c-fw-b c-ww480 c-wb-ba c-textAlign-c">{{groupObject.guideDesc}}</div>
      <div v-if="groupObject.guideTitle" class="c-fs24 c-fc-gray c-mt24 c-ww480 c-wb-ba c-textAlign-c">{{groupObject.guideTitle}}</div>
      <img :src="$addXossFilter(groupObject.guideQrcode)" class="c-ww240 c-hh240 c-mt40" alt="" />
      <div class="c-fs24 c-fc-gray c-mt24 c-pb50">长按二维码识别，或保存截图</div>
    </template>
    <template v-else>
      <div class="c-fs28 c-fw-b c-ww480 c-wb-ba c-textAlign-c">{{groupObject.guideDesc}}</div>
      <div v-if="groupObject.guideTitle" class="c-fs24 c-fc-gray c-mt24 c-ww480 c-wb-ba c-textAlign-c">{{groupObject.guideTitle}}</div>
      <img :src="$addXossFilter(groupObject.guideQrcode)" class="c-ww240 c-hh240 c-mt40" alt="" />
      <div class="c-fs24 c-fc-gray c-mt24 c-pb4">长按二维码识别，或保存截图</div>
      <div class="c-ph20 c-pt40 c-w100" v-if="startAt || (groupObject.guideQrcodeType == 1 && groupObject.guideCode)">
        <div class="c-flex-row c-aligni-center c-pt28 c-w100 c-bd-td1" :class="!startAt || !(groupObject.guideQrcodeType == 1 && groupObject.guideCode) ? 'c-justify-center' : 'c-justify-sb'">
          <div v-if="groupObject.guideQrcodeType == 1 && groupObject.guideCode">
            <div class="c-flex-row c-aligni-center c-fc-xblack">
              <i class="iconfont c-fs24">&#xe652;</i>
              <span class="c-fs22 c-ml4">入群暗号</span>
            </div>
            <span class="c-fs26 c-fw-b c-mt8">{{groupObject.guideCode}}</span>
          </div>
          <div v-if="startAt">
            <div class="c-flex-row c-aligni-center c-fc-xblack">
              <i class="iconfont c-fs24">&#xe70f;</i>
              <span class="c-fs22 c-ml4">开课时间</span>
            </div>
            <span class="c-fs26 c-fw-b c-mt8">{{startAt.substr(0,10)}}</span>
          </div>
        </div>
      </div>
      <div v-if="groupObject.guideQrcodeType == 1 && groupObject.guideCode" :class="position == 'bottom' ? 'c-w100' : 'c-ww400'" class="c-fs22 c-fc-gray c-mt30 c-bg-sgray c-center c-textAlign-c c-br25 c-pv10">添加微信时请备注入群暗号</div>
      <div v-else-if="position == 'bottom'" class="c-w100 c-hh20"></div>
    </template>
  </div>
</template>

<script>
export default {
  name: 'GroupGuidanceCom',
  components: {
  },
  props: {
    //   传入的对象
    groupObject: {
      type: Object,
      default: function () {
        return {}
      }
    },
    // 判断样式区分 训练营，公开课，直播间有暗号和时间，其他没有
    isType: {
      type: Boolean,
      default: true
    },
    startAt: {
      type: String,
      default: ''
    },
    position: {
      type: String,
      default: 'center'
    }
  },
  data() {
    return {
    }
  },
  activated() {
  },
  methods: {
    // 弹窗
    hideGuidePop() {
      this.$emit('hideGuidePop')
    }
  },
}
</script>

<style scoped>
.c-hh400 {
  height: 10rem;
}
.c-hh410 {
  height: 10.25rem;
}
</style>